<template>
    <div style="width:100%;height:100%;" @contextmenu="onContextmenu">
        <div class="box1" ref="box1"></div>
        <div class="box2" ref="box2"></div>
        <div class="box3" ref="box3"></div>

        <!-- <div class="box0">
            <el-carousel trigger="click" height="150px" :autoplay="false">
                <el-carousel-item v-for="item in 3" :key="item">
                    <h3 class="small">{{ item }}</h3>
                </el-carousel-item>
            </el-carousel>
        </div> -->
        <div class="tab-div">
            <RsTabBar ref="tabBar" v-model="tabSelectedIdx" @selectTab="onSelectTab" @closeTab="onCloseTab" @contextmenu="onTabBarContextMenu">
                <RsTabBarItem v-for="(item,idx) in tabs" :key="item.name" :index="idx" :canClose="item.canClose">{{item.name}}</RsTabBarItem>
            </RsTabBar>
        </div>
        <div class="v-div">
            <div class="div-box">测试，</div>
            <div class="div-box">test</div>
            <div style="line-height:30px;" class="div-box"><i class="rsfont icon-close-bold"></i></div>
            <div class="div-box" style="height:40px;border:solid 5px blue;margin-top:0px;"></div>
        </div>
        <div class="ctrl">
            <el-button type="primary" @click="onClick1">主要按钮</el-button>
            <el-button type="primary" @click="onClick2">主要按钮</el-button>
        </div>
        <el-menu ref="elMenu" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="onItemClick">
            <el-menu-item index="1">处理中心</el-menu-item>
            <el-menu-item index="2">消息中心</el-menu-item>
            <el-menu-item index="3">处理中心</el-menu-item>
            <el-menu-item index="4">消息中心</el-menu-item>
            <el-submenu index="5">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
                <el-submenu index="2-4">
                    <template slot="title">选项40</template>
                    <el-menu-item index="2-4-1">选项1</el-menu-item>
                    <el-menu-item index="2-4-2">选项2</el-menu-item>
                    <el-menu-item index="2-4-3">选项3</el-menu-item>
                </el-submenu>
            </el-submenu>
        </el-menu>
        <rs-menu alignType="right" :minWidth="150" ref="rsMenu" @itemClick="onItemClick"> 
            <rs-sub-menu>
                <template slot="text">系统管理</template>
                <rs-menu-item>机构管理机构管理机构管理机构管理机构管理机构管理</rs-menu-item>
                <rs-menu-item>菜单管理</rs-menu-item>
                <rs-menu-item>角色管理</rs-menu-item>
                <rs-menu-item>权限管理</rs-menu-item>
                <rs-menu-item>员工管理</rs-menu-item>
            </rs-sub-menu>
            <rs-menu-item>菜单管理</rs-menu-item>
            <rs-menu-item>菜单4</rs-menu-item>
            <rs-menu-item>菜单5</rs-menu-item>
            <rs-menu-item index="refresh">
                <template slot="icon"><i class="rs-icon-refresh"></i></template>
                <template>刷新</template>
            </rs-menu-item>
            <rs-sub-menu>
                <template slot="text">我的工作台</template>
                <template slot="icon"><i class="rs-icon-close-bold"></i></template>
                <rs-menu-item>菜单1</rs-menu-item>
                <rs-menu-item>菜单2</rs-menu-item>
                <rs-menu-item>菜单4</rs-menu-item>
                <rs-menu-item>菜单5</rs-menu-item>
                <rs-sub-menu>
                    <template slot="text">子菜单子菜单子菜单子菜单</template>
                    <rs-menu-item>子菜单1</rs-menu-item>
                    <rs-menu-item>子菜单2</rs-menu-item>
                    <rs-menu-item>子菜单4</rs-menu-item>
                    <rs-menu-item>子菜单5</rs-menu-item>
                    <rs-menu-item>子菜单6</rs-menu-item>
                    <rs-sub-menu>
                        <template slot="text">子菜单子</template>
                        <rs-menu-item>子菜单1</rs-menu-item>
                        <rs-menu-item>子菜单2</rs-menu-item>
                        <rs-menu-item>子菜单4</rs-menu-item>
                        <rs-menu-item>子菜单5</rs-menu-item>
                        <rs-menu-item>子菜单6</rs-menu-item>
                    </rs-sub-menu>
                </rs-sub-menu>
                <rs-menu-item>菜单6</rs-menu-item>
            </rs-sub-menu>
        </rs-menu>
        <rs-menu :contextMenu="true" ref="rsContextMenu" :minWidth="150" @itemClick="onContextMenuItemClick">
            <rs-menu-item index="refresh">
                <template slot="icon"><i class="rs-icon-refresh"></i></template>
                刷新
            </rs-menu-item>
            <rs-menu-item index="close">
                <template slot="icon"><i class="rs-icon-close-bold"></i></template>
                关闭</rs-menu-item>
            <rs-menu-item index="closeOther">关闭其它</rs-menu-item>
            <rs-menu-item index="closeAll">关闭全部</rs-menu-item>
            <rs-sub-menu>
                <template slot="text">子菜单</template>
                <rs-menu-item>子菜单1</rs-menu-item>
                <rs-menu-item>子菜单2</rs-menu-item>
                <rs-menu-item>子菜单4</rs-menu-item>
                <rs-sub-menu>
                    <template slot="text">子菜单</template>
                    <rs-menu-item>子菜单1</rs-menu-item>
                    <rs-menu-item>子菜单2</rs-menu-item>
                    <rs-menu-item>子菜单4</rs-menu-item>
                    <rs-menu-item>子菜单5</rs-menu-item>
                    <rs-menu-item>子菜单6</rs-menu-item>
                </rs-sub-menu>
                <rs-menu-item>子菜单5</rs-menu-item>
                <rs-menu-item>子菜单6</rs-menu-item>
            </rs-sub-menu>
        </rs-menu>
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible" :append-to-body="true">
            <el-form :model="form">
                <el-form-item label="活动名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="活动区域" :label-width="formLabelWidth">
                <el-select v-model="form.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    components:{},
    data(){
        return{
            tabSelectedIdx:0,
            tabs:[
                {name:'菜单',canClose:false},
                {name:'tab2'},
                {name:'tab3'},
                {name:'tab4'},
                {name:'tab5'},
                {name:'tab6'},
                {name:'tab7'},
                {name:'tab8'},
                {name:'tab9'},
                {name:'tab10'},
                {name:'tab11'},
                {name:'tab12'},
                {name:'菜单00'},
                {name:'tab20'},
                {name:'tab30'}
            ],
            activeIndex:'',
            dialogFormVisible:false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formLabelWidth: '120px'
        }        
    },
    mounted(){

        //console.log(this.$refs.elMenu)
        //console.log(this.$refs.tabBar)
        //console.log('mounted')
    },
    methods:{
        onContextmenu(ev){
            console.log(ev)
            this.$refs.rsContextMenu.show(ev.clientX,ev.clientY);
            // this.$rsContextMenu({left:ev.clientX,top:ev.clientY,items:[
            //         {text:'menu1'},
            //         {text:'menu2',enabled:false},
            //         {text:'menu3'},
            //         {text:'menu4',items:[
            //             {text:'subMenu1'},
            //             {text:'subMenu2'},
            //             {text:'subMenu3'},
            //         ]}
            //     ]
            // });
            ev.stopPropagation();
            ev.preventDefault();
        },
        onClick1(){
            //console.log(arguments)
            //const transform = "transition: all .5s";
            // const transform = "translate(200px,0)";
            // const style = this.$refs.box1.style;
            // console.log(style)
            // // style.left = '200px';
            // style.transtion = "transform 1s ease-in-out";
            // style.webkitTransition = "transform 1s ease-in-out";
            // style.msTransition = "transform 1s ease-in-out";
            // style.transform = transform;
            // style.msTransform = transform;
            // style.webkitTransform = transform;

            // this.tabs.push({name:'newTab'+Math.ceil(Math.random()*10000)});
            // this.tabSelectedIdx = this.tabs.length -1;
            // this.$refs.tabBar.scrollToLast();

            this.$req({
                url: "/key",
                method: 'get'
            }).then(response => {
                const { data } = response;
                console.log(data)
                if( data.error_code == 0 ){
                    
                }else{
                    this.showError('获取KEY失败！');
                }
            }).catch(error => {
                this.showError('网络错误！');
            });
        },
        onClick2(){
            //this.$refs.box1.style.left = '10px';
            // const transform = "translate(0px,0)";
            // const style = this.$refs.box1.style;
            // style.transition = "transform .3s ease-in-out";
            // style.msTranstion = "transform .3s ease-in-out";
            // style.webkitTransition = "transform .3s ease-in-out";
            // style.transform = transform;
            // this.$alert('这是一段内容', '标题名称', {
            //     confirmButtonText: '确定',
            //     callback: action => {
            //         this.$message({
            //         type: 'info',
            //         message: '这是一个测试！'
            //         });
            //     }
            // });
            //this.dialogFormVisible = !this.dialogFormVisible;
            this.$delete(this.tabs,0);
        },
        onSelectTab(tab){
            console.log(tab)
        },
        onCloseTab(tab){
            let currentIdx = tab.index;
            if( currentIdx != -1 ){

                if( currentIdx <= this.tabSelectedIdx ){
                    this.tabSelectedIdx --;
                }
                this.$delete(this.tabs,currentIdx);
            }
        },
        onTabBarContextMenu(obj){
            console.log(obj)
            const {ev,tab} = obj;
            this.$refs.rsContextMenu.show(ev.clientX,ev.clientY);
        },
        onContextMenuItemClick(menu){

            const {index} = menu;
            console.log(index)
            console.log(menu)
        },
        onItemClick(){
            console.log(arguments)
        }
    }
    
}
</script>
<style lang="scss">
.box0{
    position: absolute;
    height:100px;
    width:200px;
    background-color:red;
    left:200px;
    top:10px;
}
.box1{
    position: absolute;
    height:100px;
    width:100px;
    background-color:red;
    left:10px;
    top:10px;
    //transition: transform .2s ease-in-out;
    //transform: translate();
}
.box2{
    position: absolute;
    height:100px;
    width:100px;
    background-color:blue;
    left:10px;
    top:120px;
}
.box3{	
    position: absolute;
    left:550px;
    top:100px;
    width: 0px;
    height: 0px;
    border: solid 50px transparent;
    background-color: transparent;
    border-top-color: red;
    border-bottom-color: red;
    border-left-color: red;
    border-right-color: red;
    border-top-left-radius: 40%;
    border-top-right-radius: 100%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 40%;
    //margin: 300px auto;
    transform: rotate(-45deg);
    opacity: 0.8;
    
    //filter: drop-shadow(0px 0px 30px red);
    //box-shadow: 0px 0px 30px red;
    //animation: m 0.8s linear infinite;
    // &::after{
    //     content: "";
    //     width:200px;
    //     height: 200px;
    //     background-color:red;
    //     position: relative;
    //     display: block;
    //     border-radius: 50%;
    //     top: -300px;
    //     left: 0px;
    // }
    // &::before{
    //     content: "";
    //     width:200px;
    //     height: 200px;
    //     background-color:red;
    //     position: relative;
    //     display: block;
    //     border-radius: 50%;
    //     top: 0px;
    //     left: -100px;
    // }
    &:hover{
        animation: m 0.8s linear;
        animation-fill-mode:forwards;
    }
 }

 .tab-div{
    position: absolute;
    left:50px;
    top:250px;
    width: 800px;
    height: 40px;
    padding:0px 10px;
    background-color: white;
 }

 .v-div{
    position: absolute;
    left:50px;
    top:300px;
    width: 600px;
    height: 40px;
    padding:0px 10px;
    //background-color: black;
    border: solid 5px coral;
    border-top-width: 0;
    line-height: 30px;
    color: white;
    //vertical-align: middle;
    >.div-box{
        float: left;
    }
 }
 @keyframes m{
    //50%{transform: rotate(45deg) scale(0.8,0.8);}
    50%{transform: rotate(-45deg) scale(0.8,0.8);}
 
    //80%{transform: rotate(45deg) scale(0.7,0.7);}
    80%{transform: rotate(-45deg) scale(0.7,0.7);}
 }
 
.ctrl{
    position: absolute;
    bottom: 0;
    width:100%;
    height:60px;
    padding:0 20px;
}
</style>